<template>
  <div class="app-container">
 <!--上传按钮-->
    <el-button
      size="mini"
      type="success"
      @click="openDialog"><i class="el-icon-upload el-icon--right"></i> 图片上传
    </el-button>

    <!--列表-->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      class="tableSyle"
      highlight-current-row>


      <el-table-column align="center" label="ID" width="100">
        <template slot-scope="scope">
          {{ scope.$index }}
        </template>
      </el-table-column>

      <el-table-column label="标题" width="500">
        <template slot-scope="scope">
          {{ scope.row.picInfo }}
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="图片地址" >
        <template slot-scope="scope">
          <!--<i class="el-icon-time"/>-->
          <span>{{ scope.row.picUrl }}</span>
        </template>
      </el-table-column>

      <el-table-column label="预览" width="100" align="center"  >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handlePreview(scope.$index, scope.row)">预览
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="复制" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="success"
            @click="handleCopy(scope.$index, scope.row)">复制地址
          </el-button>
        </template>
      </el-table-column>

    <!--  <el-table-column label="下载" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleDownLoad(scope.$index, scope.row)">下载
          </el-button>
        </template>
      </el-table-column>-->

      <el-table-column class-name="status-col" label="删除" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>


    </el-table>

    <!--分页控件-->
    <el-pagination class="articlePaginnation"
                   background
                   @current-change="handleCurrentChange"
                   layout="prev, pager, next"
                   :page-size="10"
                   :total=pageSum>
    </el-pagination>

    <!--图片预览弹窗-->
    <el-dialog
      class="previeDialog"
      title="预览"
      :visible.sync="dialogVisible"
      width="50%">
      <img :src="prevViewPicUrl"  class="previewimg" >
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
       </span>
    </el-dialog>

    <!--文件上传弹窗-->
    <el-dialog   :visible.sync="dialogFormVisible" @close="closeDialog">
      <UploadDialog  />
    </el-dialog>

  </div>
</template>

<script>
  import {getPicList} from '@/api/apis'
  import UploadDialog from "@/views/UploadDialog";
  // 将 store 中的 getter 映射到局部计算属性
  import { mapGetters } from 'vuex'
  export default {

    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        }
        return statusMap[status]
      }
    },
    data() {
      return {
        list: null,
        listLoading: true,
        currentPageNum: 1,
        pageSum: 0, //  数据总条数
        dialogVisible: false,
        prevViewPicUrl: "",
        dialogFormVisible: false,
        // currentDownFileUrl: ""

      }
    },
    created() {
      this.fetchData()
    },
    computed: {
      ...mapGetters([ 'dialogFormVisibleTest'])
    },
    components: {
      UploadDialog,
    } ,

    watch: {
      dialogFormVisibleTest(newVal, oldVal) {
       //console.log("监听到 弹窗状态有变化"+ newVal +"  "+ oldVal)
       this.dialogFormVisible = newVal ;
      },
      } , // end watch



      methods: {

      fetchData() {
        this.listLoading = true

        getPicList(this.currentPageNum).then(response => {
          console.log(response.list)
          this.pageSum = response.sum
          this.list = response.list
          this.listLoading = false
        })
      },

      handleCurrentChange(val) {
        this.currentPageNum = val
        this.fetchData()
      },

      handleCopy(index, row) {
        let that = this;
        this.$copyText(row.picUrl).then(function (e) {
          that.$message.success("复制成功");
        }, function (e) {
          alert('Can not copy')
          that.$message.success("复制失败");
        })
      },

      handleDelete(index, row) {
        this.$confirm('删除操作无法恢复, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(
          () => {
            this.$message.success("执行删除");
          }
        ).catch(
          // 取消删除
        )
      },//
      handlePreview(index, row) {
        this.dialogVisible = true;
        this.prevViewPicUrl = row.picUrl;
      },


       closeDialog() {
         this.$store.dispatch( 'changeUploadDialogVisableAction', false)
        // this.dialogFormVisible= false ;
      },

      openDialog() {
        this.$store.dispatch( 'changeUploadDialogVisableAction', true)
        //this.dialogFormVisible= true ;
      },
 /*     handleDownLoad(index, row){
        // this.currentDownFileUrl = row.picUrl;
        let downLoadViewA =   this.$refs.fileDownView;
        // downLoadViewA.href= row.picUrl ;
        downLoadViewA.href=  "https://www.csdn.net/app/img/wxfix.png";
        // downLoadViewA.href=  "https://codeload.github.com/zhen-ke/electron-qiniu/zip/master";
        // downLoadViewA.href=  "111111111111";
        downLoadViewA.download=  "" ;
        // this.$message.success("下载"+this.$refs.fileDownView.href);
        // this.$message.success("下载"+this.$refs.fileDownView.download);
        downLoadViewA.click();
      }*/

    },

  }
</script>

<style>
  .articlePaginnation {
    text-align: center;
    margin-top: 20px;
  }


  .previeDialog {
    text-align: center;
  }

  .previewimg {
    max-width: 100%;
    max-height: 600px;
  }

  .tableSyle{
    margin-top: 10px;
  }


</style>


